<template>
  <div class="home" style="height:calc(100vh - 64px)">
    <!-- 选择站点和时间 -->
    <Row type="flex" justify="start" align="middle" style="height:40px;">
      <i-col>
        <!-- <Form :model="selectedData" :label-width="100" inline>
          <FormItem label="选择站点：">
            <Select
              v-model="selectedData.station"
              @on-change="handleSelectChange">
              <Option
                v-for="item in stationList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Form> -->
      </i-col>
      <i-col class="mytabs">
        <Tabs v-model="selectedData.dateTime" @on-click="handleTabChange">
          <TabPane label="实时数据" name="today"></TabPane>
          <TabPane label="近7天" name="week"></TabPane>
          <TabPane label="近一月" name="month"></TabPane>
        </Tabs>
      </i-col>
    </Row>
    <router-view></router-view>
  </div>
</template>

<script>
import constData from "@/util/constData";
import {mapState,mapActions} from 'vuex'
export default {
  name: "station-analysis",
  data() {
    return {
      selectedData: {
        station: '',
        dateTime: ''
      },
      stationList: constData.stationList
    };
  },
  computed: {
    ...mapState(['selectedStationData'])
  },
  created () {
    // this.updateSelectedStationData(this.$route.params)
    // this.selectedData = this.$store.state.selectedStationData
    console.log('主页:',this.$route)
    if (this.$route.query.station) {
      let sta = this.stationList.find(ele => {
        // console.log('ele:', ele)
        return ele.value === this.$route.query.station;
      });
      console.log('station:', sta)
      let stationData = {
        station: sta.value,
        dateTime: 'today'
      }
      this.updateSelectedStationData(stationData)
      this.selectedData = this.$store.state.selectedStationData
      console.log('this.selectedData', this.selectedData)
      this.$router.push({ name: 'station', params: stationData})
      sessionStorage.setItem("station", stationData.station)

    } else {
      let sessionStation = sessionStorage.getItem("station")
      console.log('sessionStation:', sessionStation)
      let stationData = {
        station: sessionStation,
        dateTime: 'today'
      }
      console.log('主页查看站点数据:', stationData)
      this.updateSelectedStationData(stationData)
      this.$router.push({ name: 'station', params: {station:sessionStation, dateTime: 'today'}})
    }
  },
  methods: {
    ...mapActions(['updateSelectedStationData', 'initAllStateData']),
    handleTabChange(time){
      console.log('时间————————————————', time)
      this.$store.dispatch('initAllStateData')
      this.$store.dispatch('updateSelectedStationData', { station: this.selectedStationData.station, dateTime: time})
      this.$router.push({ name: 'station', params: { station: this.selectedStationData.station, dateTime: time}})
    }
  }
};
</script>

<style lang="less">
.mytabs {
  height: 6rem;
}
.mytabs .ivu-tabs .ivu-tabs-nav .ivu-tabs-tab-active {
  color: #fff !important;
}
.mytabs .ivu-tabs .ivu-tabs-tab {
  font-size: 1.4rem !important;
}
</style>
